import React, { Component } from 'react'
import { NavLink, Route, Switch } from 'react-router-dom'
import './Index.less'
import Home from '../Home/Home'
import Cate from '../Cate/Cate'
import Shop from '../Shop/Shop'
import Mine from '../Mine/Mine'
export default class Index extends Component {
  render() {
    return (
      <div className='index'>
        {/* 二级路由视图 */}
        <Switch >
          <Route path='/index/home' component={Home}></Route>
          <Route path='/index/cate' component={Cate}></Route>
          <Route path='/index/shop' component={Shop}></Route>
          {/* 独享守卫   我的Mine */}
          <Route path='/index/mine' render={(props)=>{
            let userInfo=JSON.parse(sessionStorage.getItem('userInfo'))
            if(userInfo.phone==='123'){
              // 123账号一点击我的就跳转到首页
              props.history.replace('/index/home')
            }
            return <Mine {...props}></Mine>
          }}></Route>
        </Switch>

        {/* 底部导航   activeClassName 高亮效果*/}
        <footer>
          <NavLink activeClassName='active' to="/index/home">
            <i className='iconfont icon-shouye'></i>
            <div>首页</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/cate">
            <i className='iconfont icon-fenlei'></i>
            <div>分类</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/shop">
            <i className='iconfont icon-gouwucheman'></i>
            <div>购物车</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/mine">
            <i className='iconfont icon-wode'></i>
            <div>我的</div>
          </NavLink>
        </footer>
      </div>
    )
  }
}
